<template>
  <div class="todo-list">
    <div class="todo-list__name">{{ name }} - {{ abc }}</div>

    <!-- <TodoItem
      v-for="todo in todos"
      :key="todo.id"
      :id="todo.id"
      :name="todo.name"
      :status="todo.status"
    /> -->

    <TodoItem
      v-for="todo in todos"
      :key="todo.id"
      v-bind="todo"
      @aaa="onChange"
    />
  </div>
</template>

<script setup>
// 使用 setup 语法糖
// 1. 引入的组件可以不用 components 注册，直接使用
import TodoItem from "@/components/TodoItem.vue";

// 类似 props 选项, 定义组件接收的 prop
defineProps(["name", "todos"]);

const emit = defineEmits(["bbb"]);

// 2. 最外层定义的数据或方法都可以直接在模板中使用，不需要return 了。
const abc = 10;

// 自定义事件的处理函数中接收到的 $event 不是事件对象，而是触发这个自定义事件时，传递过来的参数
function onChange(payload) {
  console.log("TodoList 定义的 onChange", payload);
  // 继续往上传递
  emit("bbb", payload);
}
</script>

<!-- <script>
import TodoItem from "@/components/TodoItem.vue";
export default {
  props: ["name"],

  components: {
    TodoItem,
  },

  data() {
    return {
      abc: 10,
    };
  },
};
</script> -->

<style scoped lang="scss">
.todo-list {
  margin-top: 10px;
  border: 1px solid burlywood;
  &__name {
    height: 36px;
    font-size: 24px;
    text-align: center;
  }
}
</style>
